import Vue from 'vue'
import VueRouter from "vue-router";
Vue.use(VueRouter)

// 导入组件
import layout from '@/views/layout'
import ArticleDetail from '@/views/article-detail'
import article from '@/views/article'
import collect from '@/views/collect'
import like from '@/views/like'
import user from '@/views/user'

// 准备路由规则
const routes = [
  // 就是我在路径上输入/a，会自动跳转到/article
  { path: '/', redirect: '/article' },
  { 
    name: 'layout', 
    path: '/', 
    component: layout,
    children: [
      { name:'article', path: 'article', component: article },
      { name:'collect', path: 'collect', component: collect },
      { name:'like', path: 'like', component: like },
      { name:'user', path: 'user', component: user },
    ]
   },
  // 注意：这里的:id不是代表路径写 /detail/:id
  // 而是指id是一个必须要传的参数，参数名叫id
  // 例如id叫4442，所以后面要想访问这个路由就要 /detail/4442
  { name: 'detail', path: '/detail/:id', component: ArticleDetail },
]
const router = new VueRouter({
  routes
})

export default router